.zero{
  position: relative;
  .logo{
    width: 18%;
    margin:auto;
    margin-top: -30%;

    img{
      width: 100%;
    }
  }
  .logo_txt{
    width: 34%;
    margin:auto;
    margin-top: 52%;
    -webkit-animation: go 1.5s linear 0s infinite;
    img{
      width: 100%;
    }
  }
  .first_des{
    position: absolute;
    width: 88%;
    text-align: center;
    left:6%;
    top:64%;
    p{
      font-size: 8vw;
      color:#148FED;

    }
  }
  .inner_circle{
    position: absolute;
    top: 14%;
    width: 88%;
    left:58%;
    -webkit-transform: translate(-50%);
    img{
      width: 100%;
    }
  }
  .outer_circle{
    position: absolute;
    top: 8%;
    left:5%;
    width: 90%;
    img{
      width: 100%;
    }
  }

  .open{
    position: absolute;
    top:78%;
    left:50%;
    -webkit-transform:translate(-50%) ;
    width: 75%;
    height: 70px;
    margin: 0 auto;
    text-align: center;
    line-height: 70px;
    font-size: 5vw;
    color:#148FED;
    background-image: url(../images/firstpage/btn.png);
    background-repeat: round;
  }
}

.page_01{
  width: 100%;
  position: relative;
  .top{
    width: 100%;
    height: 44px;
    background-color: #023561;
    border-top:2px solid #023E70;
    border-bottom:2px solid #023E70;
    position: relative;
    margin-bottom: 20px;
    h3{
      width: 100%;
      height: 100%;
      text-align: center;
      line-height: 44px;
      font-size: 5vw;
      color:rgba(20,143,237,1);

    }
    span{
      position: absolute;
      width: 11px;
      height: 17px;
      top: 13px;
      left: 15px;
      background-image: url(../images/rank/b_arrow.png);
      background-position: center center;
      background-size: cover;

    }
  }
  .first_book{
    width: 40vw;
    height: 48vw;
    background: url("../images/rank/big_%20polygon.png");
    background-repeat:round ;
    margin: auto;
    img{
      width: 60%;
      margin: auto;
      display: block;
      padding-top: 12%;

    }
    p{
      font-size: 4vw;
      float: left;
      margin-left: 26%;
      margin-top: 5px;

    }
    span{
      font-size: 4vw;
      float: left;
      display: block;
      width:5vw;
      height:5vw;
      border:1px solid #FC3737;
      border-radius: 100%;
      background: #A32B32;
      display: block;
      text-align: center;
      line-height: 5vw;
      margin-top: 5px;

    }
  }
  .bot_book{
    position: relative;
    .text{
      margin:3vw auto;
      text-align: center;
      color:#fff;
      font-size: 4vw;
      font-family: 'MyriadPro Regular';
    }
    .small2{
      width: 30vw;
      height: 36vw;

    }
    .small3{
      position: absolute;
      width: 22vw;
      height: 26vw;
      left: 11%;
      top:5%;
      p{
        font-size:3vw;
      }
      span{
        width:4vw;
        height: 4vw;
        line-height: 4vw;
        font-size: 3vw;
      }

    }
    .small4{
      position: absolute;
      width: 24vw;
      height: 28vw;
      top: 0%;
      right:10%;
      p{
        font-size:3vw;
      }
      span{
        font-size: 4vw;
        width:4vw;
        height: 4vw;
        line-height: 4vw;

      }



    }
    .small5{
      position: absolute;
      width: 16vw;
      height: 18vw;
      top: 50%;
      right:16%;
      p{
        font-size:1vw;
        margin-left: 2px;
      }
      span{
        font-size: 2vw;
        width:3vw;
        height:3vw;
        line-height: 3vw;

      }

    }
    .small6{
      position: absolute;
      width: 18vw;
      height: 22vw;
      top: 41%;
      left:8%;
      p{
        font-size:3vw;
      }
      span{
        font-size: 3vw;
        width:3vw;
        height: 3vw;
        line-height: 3vw;

      }

    }
    .small7{
      position: absolute;
      width: 18vw;
      height: 20vw;
      top: 66%;
      left:22%;
      p{
        font-size:2vw;
      }
      span{
        font-size: 2vw;
        width:3vw;
        height: 3vw;
        line-height: 3vw;

      }

    }
    .small8{
      position: absolute;
      width: 15vw;
      height: 18vw;
      top: 72%;
      left:60%;
      p{
        font-size:2vw;
        margin-left:4px;
      }
      span{
        font-size: 2vw;
        width:3vw;
        height: 3vw;
        line-height: 3vw;

      }

    }
    .small9{
      width: 14vw;
      height: 16vw;
      margin: auto;
      margin-top: 2vh;
      p{
        font-size:2vw;
        margin-left: 2px;
      }
      span{
        font-size: 2vw;
        width:3vw;
        height: 3vw;
        line-height: 3vw;

      }

    }
    .small10{
      width: 12vw;
      height: 15vw;
      position: absolute;
      top: 36%;
      left:82%;


      p{
        font-size:1vw;
        margin-left: -3px;
      }
      span{
        font-size: 1vw;
        width:3vw;
        height: 3vw;
        line-height: 3vw;

      }

    }







  }


}
.two{
  .borders{
    width: 80%;
    height: 14vh;
    border: 1px solid #099D94;
    margin: 0 auto;
    position: relative;
    text-align: center;
    .innerborder{
      position: absolute;
      width: 100%;
      height: 101%;
      top:1vh;
      left:2vw;
      border: 1px solid #099D94;
      text-align: center;
      line-height: 80px;
    }
    p:nth-of-type(1){
      padding: 2vh 0;
      font-size: 5vw;
      color:#fff;

    }
    p:nth-of-type(2){
      font-size: 7vw;
      color:#1BD747;
      span{
        font-size: 4vw;

      }

    }


  }
  .bbox{
    margin-top: 6vh;

    .borrow{
      margin-bottom: 3vh;
      li{
        float: left;
        width: 50%;
        height: 16%;
        line-height: 40px;
        text-align: center;
        font-size: 18px;
        position: relative;
        padding: 0 10%;
        .b_bg{
          width: 100%;
          background-image: url(../images/borrow/border_bg.png);
          background-repeat: round;
          font-size: 7vw;

          .b_title{
            font-size: 4vw;
          }
          span{
            color:#C6E421;
          }
          span:nth-of-type(2){
            font-size:4vw;
          }

        }

    }
    .page6-wrap {
      //width: 25.0833rem;
      //height: 16.25rem;
      background: red;
      margin: 0 auto;
      //margin-top: 10vh;

    }

  }
}
}
.three{
  width: 100%;
  height: 100%;
  position: relative;
  .outer{
    width: 90%;
    height: 30%;
    margin: 10px 0;
    margin-left: 15px;
    border:2px solid #036AC0;
    position: relative;
    .inner{
      width: 101%;
      height: 102%;
      margin-left:8px;
      margin-top: 8px;
      border:2px solid #036AC0;
      position: absolute;

    }
    img{
      height: 100%;
      margin-top: 1vh;
      margin-left: 1vw;
      //position: absolute;
      //top:10px;
      //left:6px;
    }

  }
  .pernum{
    position: relative;
    margin-top: 25px;
    display: flex;
    justify-content: space-around;
    color:#fff;
    margin-bottom: 10px;
    .numone,.numtwo,.numthree{
      margin: 0 45px;
      width: 15px;
      height: 25vh;
      background-color: #192C5C;
      border-radius: 6px;
      position: relative;
      .count1,.count2,.count3{
        position: absolute;
        z-index: 999;
      }
      .bar1,.bar2,.bar3{
        position: absolute;
        z-index: 888;
        width: 100%;
        height: 25%;
        border-radius: 6px;
        background-color: #163D72;
        bottom: 0;
        left: 0;

      }
      .bar3{
        height: 75%;

      }
      .count1,.count2{
        width: 76px;
        height: 45px;
        line-height: 30px;
        text-align: center;
        background:url(../images/count/striangle.png);
        background-size: 76px 45px;
        bottom: 25%;
        left:50%;
        -webkit-transform: translate(-50%);

      }
      .count3{
        width: 95px;
        height: 45px;
        line-height: 30px;
        text-align: center;
        background:url(../images/count/striangle.png);
        background-size: 95px 45px;
        top: 15%;
        left:50%;
        -webkit-transform: translate(-50%);

      }


    }
  }
  .des{
    display: flex;
    justify-content: space-around;
    text-align: center;
    color: #ffffff;
    font-size: 16px;
    margin-bottom: 2vh;

  }
  .totalPer{
    color:#fff;
    font-size: 18px;
    p{
      margin-left: 30px;
    }
    .box{
      width: 100%;
      padding: 0 20px;
      margin-top: 2vh;
      .rectangle_bg{
        width: 100%;
        height: 30px;
        position: relative;
        background-color: #192C5C;
        border-radius: 8px;
        .rectangle{
          height: 100%;
          width: 100px;
          position: absolute;
          top:0;
          left:0;
          border-radius: 15px;
          padding-left: 10px;
          background: url(../images/count/rectangle.png);
        }
      }
    }

  }
  #progress{
    width: 100%;
    height: 3rem;
    margin: 0 auto;
    background: #282e52;
    position: absolute;
    bottom: 7.3333rem;
  }
  .kedu{
    position: absolute;
    left: 0;
    bottom: 0;
    display: block;
    width: 100%;
    height: 1rem;
  }
  .processbar{
    position: absolute;
    left: 0px;
    top: 0px;
    height: 100%;
    width: 0px;
    border-radius: 4px;
    background: -webkit-linear-gradient(left, #4aa0d7 , #dc9472); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, #4aa0d7 , #dc9472); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, #4aa0d7 , #dc9472); /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, #4aa0d7 , #dc9472); /* 标准的语法 */
  }



}
.four {
  .banner_bg1 {
    margin: auto;
    width: 76%;
    height: 67%;
    padding:5vh 3vw 8vh 3vw;
    background: url(../images/recommend/banner_bg.png);
    background-repeat: round;
    .bg_pic {
      height: 100%;
    }
    p{
      text-align: center;
      font-size: 6vw;
    }

  }
  .banner_des{
    width: 60%;
    margin: auto;
    margin-top: 2vw;
    padding: 1vw 0;
    font-size: 4vw;
    text-align: center;
    vertical-align: middle;
    span:nth-of-type(2){
      display: inline-block;
      width: 50px;
      height: 50px;
      text-align: center;
      line-height: 50px;
      margin:0 3vw;
      text-shadow: 0 0 10px #fff;
      background-image: url(../images/recommend/num_bg.png);
      background-repeat: round;

    }

  }
}
.star{
  .allstar{
    width: 90%;
    margin:auto;
    border:1px solid rgba(1,48,47,1);
    ul{
      li{
        text-align: center;
        position: relative;
        padding: 1vh 5%;
        border-bottom: 1px solid rgba(1,48,47,1);
        .s_head{
          width: 30%;
          margin: auto;
          img{
            width: 100%;
          }
        }
        .s_rank{
          width: 55%;
          height: 5vh;
          margin: 0.5vh auto;
          //text-align: center;
          line-height: 5vh;
          background-image: url(../images/star/red_sbg.png);
          background-repeat: round;
        }
        p{
          text-align: center;
          font-size: 3vw;
          color:rgba(120,157,217,1);
        }
        .p_bg{
          width: 16%;
          height: 3.2vh;
          line-height: 3.2vh;
          position: absolute;
          left:0;
          top:0;
          background-image: url(../images/star/red_bg.png);
          background-repeat: round;
        }

      }
      li:nth-of-type(2){
        .s_rank{
          background-image: url(../images/star/yellow_sbg.png);

        }
        .p_bg{
          background-image: url(../images/star/yellow_bg.png);

        }

      }
      li:nth-of-type(3){
        border-bottom: none;
        .s_rank{
          background-image: url(../images/star/green_sbg.png);

        }
        .p_bg{
          background-image: url(../images/star/green_bg.png);

        }
      }
    }
  }
}
.five {
  //.notice_title{
  //  width: 65%;
  //  height: 12vw;
  //  background-image: url(../images/notice/title_bg.png);
  //  background-repeat: round;
  //  margin-left: 4vw;
  //  text-align: center;
  //  line-height: 12vw;
  //
  //}
  .notice_con {
    height: 66%;
    overflow: hidden;
    position: relative;
    .other {
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      .longline {
        position: absolute;
        height: 100%;
        border: 1px solid #3970D5;
        top: 3%;
        left: 20%;
        z-index: -9999;
        opacity: 0.3;
        &::before,
        &::after {
          /*1.一定设置content属性*/
          content: "";
          /*2.如果需要设置宽度就应该转换其为块级元素，它默认是行级元素  float  display  position*/
          position: absolute;
          left: -3px;
          //top: -10px;
          display: block;
          width: 4px;
          height: 4px;
          border-radius: 100%;
          border: 1px solid #3970D5;
        }
        &::before{
          top: -7px;
        }
        &::after {
         bottom: -6px;
         border: 1px solid #3970D5;

        }
      }

      li {
        text-align: center;
        width: 90%;
        margin: 3vh auto;

        .notice_date {
          float: left;
          margin-top: 8vw;
          color:rgba(220,230,247,1);
        }
        .contact_icon {
          display: block;
          float: left;
          width: 22px;
          height: 20px;
          background-image: url(../images/notice/icon.png);
          background-repeat: round;
          margin-top: 7vw;
          margin-left: 3vw;

        }
        .contact_line {
          display: block;
          float: left;
          margin-top: 2vw;
          margin-left: 3vw;
          color:rgba(220,230,247,1);

          span{
            display: inline-block;
            width: 18vw;
            height: 5px;
            background-image: url(../images/notice/mline.png);
            background-repeat: round;
          }
        }
        .notice_con {
          display: block;
          float: right;
          width: 50%;
          //margin-top: 10px;
          background-image: url(../images/notice/middle_frame.png);
          background-repeat: round;
          padding: 4vw 5vw 4vw 7vw;
          text-align: center;
          margin-right: 1vw;


          h3 {
            width: 100%;
            color: #80A7E7;
            font-size: 3vw;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

          }
          p {
            width: 100%;
            color: #77878B;
            font-size: 1vw;
            overflow: hidden;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
            white-space: nowrap;
          }

        }
      }
      li:first-child {
        .contact_icon {
          margin-top: 8vw;
        }
        .contact_line {
          margin-top: 6vw;
          margin-left:1vw;
          color:rgba(220,230,247,1);
          p {
            margin-bottom: -3vw;
          }

          span {
            width: 20vw;
            height: 5vw;
            background-image: url(../images/notice/top_line.png);
            background-repeat: round;
          }
        }
        .notice_con {
          width: 51%;
          position: relative;
          background-image: url(../images/notice/first_frame.png);
          .new_icon {
            position: absolute;
            width: 30px;
            height: 20px;
            background-image: url(../images/notice/new.png);
            background-repeat: round;
            top: 1px;
            left: 12px;

          }
          h3 {
            color: #0479D8;
          }
          p {
            color: #C8E547;
          }

        }
      }
      li:last-child {
        .contact_line {
          span {
            height: 6vw;
            width: 52px;
            margin-top: 2vw;
            background-image: url(../images/notice/bottom_line.png);
            background-repeat: round;
          }
        }
        .notice_con {
          width: 52%;

          background-image: url(../images/notice/last_frame.png);
        }

      }

    }

  }
}
.noticelist{
   .top{
     margin-bottom: 40px;
   }

   .list{
     width: 80%;
     padding: 3vw;
     margin: auto;
     background-image: url(../images/noticelist/fborder.png);
     background-repeat: round;
     .listitle{
       width: 69%;
       height: 7vh;
       font-size: 4vw;
       line-height: 6vh;
       margin: 0 auto;
       padding: 0 3vw;
       color: #148fed;
       background-image: url(../images/noticelist/fborder_bg.png);
       background-repeat: round;
       margin-top: -10vw;
       overflow: hidden;
       text-overflow: ellipsis;
       -o-text-overflow: ellipsis;
       white-space: nowrap;



     }
     .listcon{
       padding: 2vw 3vw;
       text-align: center;
       .botline{
         width: 60%;
         text-align: center;
         border-bottom: 1px solid rgba(220,230,247,1);
         padding-bottom: 10px;
         margin: 0 auto;
         margin-bottom:3vh;

         span{
           display: inline-block;
           color:rgba(220,230,247,1);
           font-size: 3vw;
         }

       }
       p{
         overflow: hidden;
         color: #80A7E7;
         font-size: 4vw;
         text-indent: 6vw;


       }


     }
   }
}




